import {useNavigate} from "react-router-dom";
import Return2Icon from "@src/assets/return2.svg?react"
import NextIcon from "@src/assets/next.svg?react"
import PreviousIcon from "@src/assets/previous.svg?react"
import PlaylistIcon from "@src/assets/playlist.svg?react"
import "./index.scss"
import {useAudioPlayer} from "@src/store/music.ts";
import {PlaylistTrackDataCreate} from "@src/store/playlistTrackData.ts";
import Lyric from "@src/components/lyric";
import Playlist from "@src/components/playlist"
import {useEffect, useState} from "react";
import {useRequest} from "ahooks";
import {songUrl} from "@src/services/music.ts";
import {convertSecondsToMMSS} from "@src/utils/date.ts"

//歌曲详细
const SongDetail = () => {
    const navigate = useNavigate();
    const {song, isPlaying, play, pause, setSong, setSongUrlData, percentage, audio, setProgress} = useAudioPlayer()
    const {songsList} = PlaylistTrackDataCreate()
    const [PlaylistIsShow, setPlaylistIsShow] = useState<boolean>(false)
    const songUrlApi = useRequest(songUrl, {manual: true});
    const playBtn = () => {
        if (isPlaying) {
            pause()
        } else {
            play()
        }
    }
    // 切换歌曲的通用函数
    const switchSong = (offset: number) => {
        const currentIndex = songsList.findIndex((item) => item.id === song.id);
        const newIndex = (currentIndex + offset + songsList.length) % songsList.length; // 处理循环播放逻辑
        playIndexSong(newIndex)
    }

    //播放 index 的歌曲
    function playIndexSong(index: number) {
        // 获取下一首歌的信息
        const nextSong = songsList[index];
        // 调用 API 获取歌曲播放链接
        songUrlApi.runAsync(nextSong.id)
            .then((data) => {
                // 设置当前播放的歌曲信息
                setSong(nextSong);
                // 设置歌曲的播放链接
                setSongUrlData(data);
                // 调用 play 方法开始播放
                play();
            })
    }

    const [easterEgg, setEasterEgg] = useState<boolean>(false)
    const [progress, setStateProgress] = useState(0)
    const [currentTime, setCurrentTime] = useState("00:00")
    const updateProgress = () => {
        setStateProgress(percentage())
        setCurrentTime(convertSecondsToMMSS(audio.currentTime))
    }


    useEffect(() => {
        audio.addEventListener('timeupdate', updateProgress);
        return () => {
            audio.removeEventListener('timeupdate', updateProgress);
        };
    }, []);
    return <div className="SongDetail">
        <div className="head centered">
            <Return2Icon onClick={() => navigate(-1)}></Return2Icon>
            <div>
                <h4 className="text-overflow-1">{song.name}</h4>
                <p className="name">{song.ar[0].name}</p>
            </div>
            <div onClick={() => setEasterEgg(!easterEgg)}>{easterEgg ? "😋" : "🥲"}</div>
        </div>

        <div className="record-player">
            <div className="pole"
                 style={{transform: isPlaying ? "rotate(0deg)" : "rotate(-20deg)"}}>
                <div></div>
            </div>
            <div className="picture centered"
                 style={{animationPlayState: isPlaying ? 'running' : 'paused'}}>
                <div className="picUrl">
                    <img src={song.al.picUrl} alt=""/></div>
            </div>
        </div>
        <div className="lyric-box">
            <Lyric id={song.id}></Lyric>
        </div>

        <div className="bottom-box">
            <div className="song-progress">
                <div className="progress-bar">
                    <input type="range" className="range-1" onChange={(e) => {
                        setProgress(Number(e.target.value))
                    }}/>
                    <input type="range" value={progress} readOnly/>
                </div>
                <div>
                    <p> {currentTime}</p>
                    <p>{convertSecondsToMMSS(audio.duration)}</p>
                </div>
            </div>
            <div className="controller-box">
                <div></div>
                <div className="controller">
                    <div><PreviousIcon onClick={() => switchSong(-1)}></PreviousIcon></div>
                    <div>
                        <div onClick={playBtn} className={"play-btn " + (isPlaying && "isPlay")}></div>
                    </div>
                    <div><NextIcon onClick={() => switchSong(1)}></NextIcon></div>
                </div>
                <PlaylistIcon onClick={() => setPlaylistIsShow(true)}></PlaylistIcon>
            </div>
        </div>
        <Playlist isOpen={PlaylistIsShow} setIsOpen={setPlaylistIsShow}></Playlist>
    </div>
}
export default SongDetail;